<template>
  <div class="shoplist-wrapper" :style="'height:' + wrapperHeight + 'rem'">
    <vue-better-scroll
      :pullUpLoad="pullUpLoadObj"
      @pulling-up="onPullingUp"
      :listenScroll="true"
      ref="scroll"
    >
      <ul v-if="shopListArr.length">
        <router-link
          :to="{ path: 'shop', query: { geohash, id: item.id } }"
          v-for="item in shopListArr"
          tag="li"
          :key="item.id"
          class="shop-li"
        >
          <section>
            <img :src="imgBaseUrl + item.image_path" class="shop-img" />
          </section>
          <hgroup class="shop-right">
            <header class="shop-detail-header">
              <h4 :class="item.is_premium ? 'premium' : ''" class="shop-title">
                <span class="ellipsis">{{ item.name }}</span>
              </h4>
              <ul class="shop-detail-ul">
                <li
                  v-for="item in item.supports"
                  :key="item.id"
                  class="supports"
                >
                  {{ item.icon_name }}
                </li>
              </ul>
            </header>
            <h5 class="rating-order-arrive">
              <section class="rating-order-left">
                <rating-star :rating="item.rating"></rating-star>
                <section class="rating-num">
                  <!-- <span class="rating-num">{{ item.rating }}</span> -->
                  {{ item.rating }}
                </section>
                <section class="order-num">
                  月售{{ item.recent_order_num }}单
                </section>
              </section>
              <section class="arrive-on-time">
                <span
                  class="delivery_style arrive-on-time-left"
                  v-if="item.delivery_mode"
                  >{{ item.delivery_mode.text }}</span
                >
                <span
                  class="delivery_style arrive-on-time-right"
                  v-if="zhunshi(item.supports)"
                  >准时达</span
                >
              </section>
            </h5>
            <h5 class="fee-distance">
              <section class="fee">
                ¥{{ item.float_minimum_order_amount }}起送 / 配送费约¥{{
                  item.float_delivery_fee
                }}
              </section>
              <section class="distance-time">
                <span class="distance">{{ item.distance }}</span> /
                <span class="time">{{ item.order_lead_time }}</span>
              </section>
            </h5>
          </hgroup>
        </router-link>
      </ul>
    </vue-better-scroll>
    <button class="back-top" @click="backTop" v-show="showBackStatus">
      <icon-svg icon-class="iconfanhuidingbu"></icon-svg>
    </button>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { shopList } from "@/network/getData";
import { calcSize, backTop } from "./mixin";
import { imgBaseUrl } from "@/config/env";
import RatingStar from "@/components/common/RatingStar";
// import { debounce } from "lodash";
export default {
  name: "shoplist",
  data() {
    return {
      shopListArr: [],
      offset: 0,
      touchend: false,
      imgBaseUrl,
      wrapperHeight: 0,
      pullUpLoadObj: {
        threshold: 0,
        txt: {
          more: "",
          noMore: "没有更多数据了",
        },
      },
    };
  },
  computed: {
    ...mapState(["latitude", "longitude"]),
  },
  props: ["geohash", "restaurantCategoryId"],
  mixins: [calcSize, backTop],

  components: { RatingStar },
  created() {},
  mounted() {
    this.initData();
    this.$nextTick(function () {
      let head = document.querySelector(".head-top");
      let foot = document.querySelector(".foot");
      let shophead = document.querySelector(".shop-head");
      this.wrapperHeight = this.calcSize([head, foot, shophead]);
    });
  },
  deactivated() {
    this.$refs.scroll.forceUpdate(true);
  },
  methods: {
    async initData() {
      let res = await shopList(
        this.latitude,
        this.longitude,
        this.offset,
        this.restaurantCategoryId
      );
      this.shopListArr = [...res];
      if (res.length < 20) {
        this.touchend = true;
      }
    },
    //到达底部加载更多数据
    async loaderMore() {
      if (this.touchend) {
        return;
      }
      //防止重复请求
      if (this.preventRepeatReuqest) {
        return;
      }
      this.showLoading = true;
      this.preventRepeatReuqest = true;

      //数据的定位加20位
      this.offset += 20;
      let res = await shopList(
        this.latitude,
        this.longitude,
        this.offset,
        this.restaurantCategoryId
      );
      this.shopListArr = [...this.shopListArr, ...res];
      //当获取数据小于20，说明没有更多数据，不需要再次请求数据
      if (res.length < 20) {
        this.touchend = true;
        return;
      }
      this.preventRepeatReuqest = false;
      this.$refs.scroll.forceUpdate(true);
    },
    zhunshi(supports) {
      let zhunStatus;
      if (supports instanceof Array && supports.length) {
        supports.forEach((item) => {
          if (item.icon_name === "准") {
            zhunStatus = true;
          }
        });
      } else {
        zhunStatus = false;
      }
      return zhunStatus;
    },
    onPullingUp() {
      this.loaderMore();
    },
  },
};
</script>
<style scoped lang='scss'>
@import "@/style/mixin";

.shoplist-wrapper {
  height: 15rem;
}

.shop-img {
  margin-right: 0.4rem;

  @include wh(2.7rem, 2.7rem);
}

.shop-li {
  display: flex;

  height: 4.1rem;
  padding: 0.7rem 0.4rem;

  border-bottom: 0.025rem solid #f1f1f1;
}

.shop-right {
  display: flex;
  flex: auto;
  flex-direction: column;
  justify-content: space-between;

  .shop-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .premium::before {
      display: inline-block;

      margin-right: 0.1rem;
      padding: 0 0.1rem;

      background-color: yellow;

      font-size: 0.5rem;

      content: "品牌";
    }

    .shop-title {
      display: flex;
      align-items: center;

      font-size: 0.65rem;
      font-weight: 700;

      vertical-align: middle;

      .ellipsis {
        max-width: 8rem;

        font-size: 0.65rem;
        font-weight: 700;
      }
    }

    .shop-detail-ul {
      display: flex;

      .supports {
        padding-right: 0.1rem;

        color: #999;

        font-size: 0.4rem;
      }
    }
  }
}

.rating-order-arrive {
  display: flex;
  justify-content: space-between;

  .rating-order-left {
    display: flex;

    .rating-num {
      margin: 0 0.2rem;

      color: #ff6000;

      font-size: 0.4rem;
    }

    .order-num {
      color: #666;

      font-size: 0.4rem;

      vertical-align: text-bottom;
    }
  }
}

.arrive-on-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  min-width: 5rem;
  margin-right: -0.8rem;

  transform: scale(0.7);

  .delivery_style {
    margin-left: 0.08rem;
    padding: 0.04rem 0.08rem 0;

    border: 1px;
    border-radius: 0.08rem;

    font-size: 0.4rem;
  }

  .arrive-on-time-left {
    color: #fff;
    border: 0.025rem solid $blue;
    background-color: $blue;
  }

  .arrive-on-time-right {
    color: $blue;
    border: 0.025rem solid $blue;
  }
}

.fee-distance {
  display: flex;
  justify-content: space-between;

  font-size: 0.4rem;

  .fee {
    color: #666;
  }

  .distance-time {
    .distance {
      color: #999;
    }

    .time {
      color: $blue;
    }
  }
}

.back-top {
  position: fixed;
  right: 2rem;
  bottom: 4rem;

  border-radius: 50%;
  background: rgba(255, 255, 255, 1);

  font-size: 1rem;
}

.iconfanhuidingbu {
  font-size: 1.5rem;
}
</style>
